<div id="content_body" class="content_body">
	<div class="main-title">
		<fly:block name="create">
			<fly:translate name="title_1_1"/><fly:modify name="title_1_1" />
		</fly:block>
		<fly:block name="modify">
			<fly:translate name="title_1_2"/><fly:modify name="title_1_2" />
		</fly:block>
	</div>
	<div id="map_canvas" style="width:743px;height:500px;"></div>
	<form method="post" id="frm">
		<div id="form-ligne">	
			<div id="form-titre"><fly:translate name="label_1_1"/><fly:modify name="label_1_1" /></div>
			<div id="form-field">
				<input type="text" name="latitude" id="latitude" maxlength="255" size="70" value="<fly:variable name='latitude' />" />
			</div>
		</div>
		<div id="form-ligne">	
			<div id="form-titre"><fly:translate name="label_1_2"/><fly:modify name="label_1_2" /></div>
			<div id="form-field">
				<input type="text" name="longitude" id="longitude" maxlength="255" size="70" value="<fly:variable name='longitude' />" />				
			</div>
		</div>		
		<div id="form-ligne">	
			<div id="form-titre">&nbsp;</div>
			<div id="form-field">
				<input type="button" name="get_address" id="get_address1" value="<fly:translate name='button_1_3' />" class="submit" /><fly:modify name="button_1_3" />
				<fly:block name="create">
					<input type="submit" name="submit" class="submit" id="submit" value="<fly:translate name='button_1_1' />" /><fly:modify name="button_1_1" />				
					<input type="button" name="skip" class="submit" id="skip" value="<fly:translate name='button_1_2' />" /><fly:modify name="button_1_2" />
					<input type="hidden" name="create" value="true" />
				</fly:block>
				<fly:block name="modify">
					<input type="submit" name="submit" class="submit" id="submit" value="<fly:translate name='button_2_1' />" /><fly:modify name="button_2_1" />
					<input type="hidden" name="modify" value="true" />
					<input type="hidden" name="address" value="<fly:variable name='address' />" class="addr" />
				</fly:block>
				<br /><blink><span id="sms_error"></span></blink><fly:modify name="error_1_1" />
			</div>
		</div>	
			<span id="loading" class="fltl"></span>
	</form>
	<form method="post" id="frm_skip">
		<input type="hidden" name="skip" id="skip"/>
		<input type="hidden" value="<fly:variable name='language_link' />" name="language_link" id="language_link" />
	</form>
	<div class="clear"></div>	
</div>
<script type="text/javascript">
$(document).ready(function() {
	var self = this;
	var markersArray = [];
    function clearOverlays() {
    	  if (markersArray) {
    	    for (i in markersArray) {
    	      markersArray[i].setMap(null);
    	    }
    	  }
    	  markersArray = [];
    }
    $("#auto_map_center").click(function(){
    	if(this.value=='on'){
				map_latitude = $('#latitude').val();
				map_longitude = $('#longitude').val();
			    $('#map_latitude').val(map_latitude);
			    $('#map_longitude').val(map_longitude); 
    	}
    });
    $(function() {

    	 $("#name").keyup(function(){
             var textName = $("#name").val();
  			$("#titlePopUp").text(textName); 
         });

    	 function PlacesSearchControl(str) {
    		 var el = document.createElement('DIV');
    		 var wrap = document.createElement('DIV');
    		 var input = document.createElement('INPUT');
    		 el.css({"background-color":"red","height":"100px"});
    		 el.appendChild(wrap);
    		 wrap.appendChild(input);
    		 $(el).attr('id', 'control');
    		 $(input).addClass('ui-bar-d ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d ui-autocomplete-input');
    		 $(input).attr('id', 'places');
    		 document.body.append(el);
    		 
    		 $(input).val("Hello");
    		 $('#map_canvas').gmap('autocomplete', input, function(ui) {
    		 $('#map_canvas').gmap('clear', 'markers');
    		 $('#map_canvas').gmap('set', 'bounds', null);
    		 $.mobile.pageLoading();
    		 $('#map_canvas').gmap('placesSearch', { 'location': ui.item.position, 'radius': '5000'/*, 'name': ['store']*/ }, function(results, status) {
    		 if ( status === 'OK' ) {
    		 $.each(results, function(i, item) {
    		 $('#map_canvas').gmap('addMarker', { 'id': item.id, 'icon': item.icon, 'position': item.geometry.location, 'bounds':true }).click(function() {
    		 $('#map_canvas').gmap('openInfoWindow', {'content': '<h4>'+item.name+'</h4>'}, this);
    		 });
    		 });
    		 }
    		 $.mobile.pageLoading(true);
    		 });
    		 });
    		 $(input).focus(function() {
    		 if ( $(this).val() === str ) {
    		 $(this).val('');
    		 }
    		 }).blur(function() {
    		 if ( $(this).val() == '' ) {
    		 $(this).val(str);
    		 }
    		 });
    		 return el;
    		 }
    		         
        //initialize map center
		if($("#auto_map_center:checked").length > 0){
				map_latitude = $('#latitude').val();
				map_longitude = $('#longitude').val();
			    $('#map_latitude').val(map_latitude);
			    $('#map_longitude').val(map_longitude); 
		}
	    /////////////
       $('#map_canvas').gmap( {'center': "<fly:variable name='latitude_map' />,<fly:variable name='longitude_map' />",zoom: <fly:variable name='zome_level' />}).bind('init', function(event, map) {
           //its marker from db
           
           <fly:block name="show_point">
           		$('#map_canvas').gmap('addMarker', {'position': "<fly:variable name='latitude' />,<fly:variable name='longitude' />",'animation': google.maps.Animation.DROP, 'draggable': true, 'bounds': false}, function(map, marker) {

                    marker.setTitle("<fly:variable name='name' />");
                   	markersArray.push(marker);
               
               }).dragend( function(event) {
                   var self = this;
                   findLocation(event.latLng,event, this);
                   //findLocation(marker.getPosition(), marker);
               }).click( function() {
            	   findLocation(event.latLng,event, this);
               });
           </fly:block>        
           
           $(map).click( function(event, latlng) {
           			clearOverlays();
                 $('#map_canvas').gmap('addMarker', {'position': event.latLng,'animation': google.maps.Animation.DROP, 'draggable': true, 'bounds': false}, function(map, marker) {
                   	markersArray.push(marker);
   				    
   			     	findLocation(event.latLng, marker);
               
               }).dragend( function(event) {
                   var self = this;
                   findLocation(event.latLng, this);
               }).click( function() {
            	   findLocation(event.latLng, this);
               });
           });
           
			google.maps.event.addListener(map, 'center_changed', function(event) {
	    		findLocation('','',map);
			});
			google.maps.event.addListener(map, 'zoom_changed', function(event) {
	    		findLocation('','',map);
			});
       });
        
       function findLocation(latLng, marker) {
           
			map__ = arguments[2];
			if(map__){
				
		    	mapCenter = map__.getCenter();
				map_latitude = mapCenter.lat();
				map_longitude = mapCenter.lng();
       			zoom = map__.getZoom();
       			
				if($("#auto_map_center:checked").length > 0){
						map_latitude = $('#latitude').val();
						map_longitude = $('#longitude').val(); 
				}
			    $('#map_latitude').val(map_latitude);
			    $('#map_longitude').val(map_longitude);
		    	$('#zome_level').val(zoom);
				return;
			}

			map = marker.getMap();
       		zoom = map.getZoom();
		    mapCenter = map.getCenter();
			latitude = latLng.lat();
			longitude = latLng.lng();
			map_latitude = mapCenter.lat();
			map_longitude = mapCenter.lng();
			
		    $('#latitude').val(latitude);
		   	$('#longitude').val(longitude);
		    $('#zome_level').val(zoom);
			if($("#auto_map_center:checked").length > 0){
				map_latitude = latitude;
				map_longitude = longitude; 
			}
			
		    $('#map_latitude').val(map_latitude);
		    $('#map_longitude').val(map_longitude);

		    $('#map_canvas').gmap('search', {'location': latLng}, function(results, status) {
                if ( status === 'OK' ) {
                    marker.setTitle(results[0].formatted_address);

                    var container = '<form id="dialog'+marker.__gm_id+'" method="get" action="/" >'+'<b id="titlePopUp"></b><br />'+
                    	'<label for="address_">Address</label><textarea id="address_" class="txt" name="address_" cols="40" rows="5"></textarea></p><input id="btn_update" type="button" value="Update address"/></form>';
                    content = $.trim($("#fancybox-content").text());
                    if(content==""){
    				    $.fancybox({
    				        content: container,
    				        width: 300, height: 170,
    				        scrolling: 'no',
    				        overlayShow: false,
    				        autoDimensions: false,
    				        'showCloseButton'	: true,
    				        onComplete:	function() {
    				        	$('#fancybox-wrap').animate( { "left":"0"  } , 1000 ).css({"top":"auto","bottom":"50px","position":"fixed"});
    				    	}
    				    });
                    }
                    $('#address_').text(results[0].formatted_address);
		        	$('#btn_update').click(function(){
		        		$('#address').val($('#address_').val());
			       	});

                }
            });
       }

      
    });
});
</script>
<fly:modify name="message_1" />
<fly:modify name="message_2" />